<template>
  <div class="filter-container">
    <nut-tabs v-model="selected" title-scroll title-gutter="10">
      <nut-tab-pane v-for="item in tabList" :title="item.name"></nut-tab-pane>
    </nut-tabs>
  </div>
</template>
<script setup>
import { ref, watch, toRefs, onMounted } from "vue";
import Taro, { useDidShow } from "@tarojs/taro";
const props = defineProps({
  tabList: Array,
  isSelected: Number,
});
const emit = defineEmits(["onChange"]);
const { tabList, isSelected } = toRefs(props);
const selected = ref(0);
useDidShow(() => {
  if (isSelected.value) {
    selected.value = 1;
  }
});
watch(selected, (index) => {
  emit("onChange", tabList.value[index]);
});
</script>
<style lang="less">
.filter-container {
  .nut-tabs__content {
    display: none !important;
  }
  .nut-tabs__titles {
    background: #ffffff !important;

    .nut-tabs__titles-item {
      .nut-tabs__titles-item__smile {
        display: none;
      }
      .nut-tabs__titles-item__text {
        color: #858a99;
        font-size: 22px;
      }
    }
    .nut-tabs__titles-item__line {
      background: linear-gradient(
        to right,
        #5232b7,
        #7237bc,
        #5232b7
      ) !important;
      border-radius: 30px !important;
      max-width: 50px!important;
      height: 8px!important;
    }
    .nut-tabs__titles-item.active {
      .nut-tabs__titles-item__smile {
        display: block;
        margin-top: 10px !important;
      }
      .nut-tabs__titles-item__text {
        color: #5232b7;
        font-size: 26px;
        font-weight: 600;
      }
      .nut-tabs__titles-item__text {
        color: #15181d;
      }
    }
  }
}
</style>
